<template>
  <div><div class="abstatic-height"></div>
    <div class="app-container calendar-fire-container">
        <el-container>
            <el-header style="line-height:60px">
                <div class="topText">
                    <span style="color:#FF9500;font-size:24px;">服务概况</span>
                    &nbsp;
                    <span style="color:#D1D1D6;font-size:14px;">本月各分析方案累积提供的服务次数</span>
                </div>   
            </el-header>
            <el-container>
                <el-main style="background-color:#0A1722">
                    <el-row :gutter="9">
                        <el-col :span="4">
                            <div class="left">
                                <div class="item-title">
                                    {{listInfo.name}}
                                </div>
                                <div class="item-datean">
                                    {{listInfo.time}}更新
                                </div>
                                <div class="item-num">
                                    <span class="num">{{listInfo.count}}</span>
                                    <span>次</span>
                                </div>
                            </div>
                    </el-col>
                   </el-row>
                </el-main>            
            </el-container>
        </el-container>
        <el-container>
            <el-header style="line-height:60px">
                 <div class="topText">
                    <span style="color:#FF9500;font-size:24px;">分析方案</span>
                    &nbsp;
                    <span style="color:#D1D1D6;font-size:14px;">同一台设备仅可使用同一种分析方案</span>
                </div>   
            </el-header>
            <el-container class="fire-identify">
                  <el-main style="background-color:#0A1722">
                    <el-row >
                        <el-col :span="8" v-for="(item,index) in analizeGroup" :key="index" v-show="index==0">
                                <div class="fa-content">
                                    <div class="fire_left" style="flex:3">
                                        <img :src="item.solutionImage" class="bg-fire" style="float:left;margin:0 5px;">
                                    </div>
                                    <div class="mid-text" >
                                        <span style="font-size:18px;line-height:40px;">{{item.solutionName}}</span><br>
                                        <span style="font-size:18px;line-height:30px;" v-if="item.solutionCount != ''&& item.solutionCount != null ">{{item.solutionCount}}</span>
                                        <span v-if="item.solutionCount != ''&& item.solutionCount != null "  style="font-size:12px;">台视频设备</span><br>
                                        <span style="font-size:18px;line-height:30px;" v-if="item.solutionCount == '' || item.solutionCount == null ">0</span>
                                        <span style="font-size:12px;" v-if="item.solutionCount == '' || item.solutionCount == null ">台视频设备</span><br>
                                        <!-- <span style="font-size:12px;color:#8E8E93;">计费方式：</span> <span :title="hysb.mWays">{{hysb.mWays}}</span><br> -->
                                        <!-- <span style="font-size:12px;color:#8E8E93;">服务费用：</span><span>{{hysb.fwfy}}</span> -->
                                    </div>
                                    <div class="btn-deploy">
                                        <el-button size="mini" type="primary" @click="deploy(index)">配置</el-button>
                                    </div>
                                </div>
                        </el-col>
                   </el-row>
                </el-main>            
            </el-container>
        </el-container>
    </div>
  </div>
</template>
<script>
import img_fire from "@/assets/device-images/img_fire.png";
import {
    getSumtimes,
    getAnaplan
} from  "@/api/device/videoAnalyze/index";
export default {
    data(){
        return {
            img_fire:img_fire,
            ids:"",
            listInfo:{
                title:"",
                time:"",
                num:0
            },
            analizeGroup:[]
        }
    },
    mounted(){
        this.getSum();
        this.getAnaplan();
    },
    created() {},
    computed:{
    },
    methods:{
        deploy(index){
            this.$router.push({path:'/videoSurveillance/identifyDevice',query:{plan:this.analizeGroup[index].id}})
        },
        getSum(){
            getSumtimes().then(res =>{
                //
                if(res.data.length>0){
                  this.listInfo = res.data[0];
                }

            })
        },
        getAnaplan(){
            getAnaplan().then(res =>{
                if (res.data.length>0){
                  this.analizeGroup = res.data;
                }

            })
        }
    }

}
</script>
<style rel="stylesheet/scss" lang="scss">
 .calendar-fire-container {
     width: 100%   
 }
.topText {
    width: 100%;
}
.left{
    flex-direction: column;
    display: flex;
    align-items: flex-start;
    .item-title{
        font-size: 18px;
        color: #fff;
    }
    .item-datean{
        color: #C7C7CC;
        font-size: 12px;
        line-height: 30px;
    }
    .item-num{
      color:rgba(255,255,255,.7);
      .num{
        font-size: 60px;
      }
    }
}
.fa-content{
    display: flex;
    align-items: center;
    border:1px solid rgba(80,277,194,.3);
  border-radius: 3px;
    .bg-fire{
        width: 75px;
        height: 94px;
    }
    .mid-text{
        color: #fff;
        flex: 4;
        overflow:hidden;
        text-overflow:ellipsis;
        white-space:nowrap
    }
    .btn-deploy{
        flex: 3;
        text-align: center
    }
}
</style>


